<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table1</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        <!--<link rel="stylesheet" type="text/css" href="/layui\css\layui.css">
    <script src="/layui\layui.js"></script> -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.common.js"></script>
        <!-- 使用jQuery去动态刷新页面-->

    </head>

    <body style="background-color: #DDDDDD;">
        <input type="hidden" name="chartData">
        <div class="layui-col-md12" style="margin: 20px;">
            <div class="layui-card">
                <div class="layui-card-header">品牌余额 &nbsp;
                    <span style="color: #CCCCCC;">(账单截至时间:#(recentlyCreateTime) )</span>
                </div>
                <div class="layui-card-body">
                    <div style="text-align: center;">
                        <h1>9999999999999999.999999</h1>
                        <h5>账户可用余额</h5>
                    </div>
                </div>
            </div>
        </div>

        <br>

        <div class="layui-col-md12 layui-row layui-col-space20" style="margin: 20px;">

            <div class="layui-col-md3" style="background-color: white; height:320px;">
                <div class="grid-demo">

                    <table class="layui-table" style=" ">

                        <thead>
                            <tr>
                                <th>品牌名称</th>
                                <th>可用余额</th>
                            </tr>
                        </thead>
                        <tr>
                            <td> 火锅 </td>
                            <td> 777 </td>
                        </tr>
                        <tr>
                            <td>总计</td>
                            <td>777</td>
                        </tr>
                    </table>

                </div>
            </div>

            <div class="layui-col-md8 layui-col-md-offset1" style="background-color:white;  ">
                <div class="grid-demo grid-demo-bg1" style="">
                    <div id="main" style="width: 400px;height:300px; text-align: center;"></div>
                </div>
            </div>
        </div>



        <script>
            layui.use('table', function() {



            });

            function dateFormat(thisDate, fmt) {
                var o = {
                    "M+": thisDate.getMonth() + 1,
                    "d+": thisDate.getDate(),
                    "h+": thisDate.getHours(),
                    "m+": thisDate.getMinutes(),
                    "s+": thisDate.getSeconds(),
                    "q+": Math.floor((thisDate.getMonth() + 3) / 3),
                    "S": thisDate.getMilliseconds()
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (thisDate.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
                            .length)));
                return fmt;
            }
            var option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '60%',
                    data: [100, 52, 200, 334, 390, 330, 220] //y轴数据
                }]
            };

            var chartDataStr =
                "{ \"x\": [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"] , \"y\": [150, 52, 200.09, 334.44, 390.22, 330.11, 220]}";
            // var chartData={ "x": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] , "y": [150, 52, 200, 334, 390, 330, 220]};

            var chartData = JSON.parse(chartDataStr);

            option.xAxis[0].data = chartData.x;
            option.series[0].data = chartData.y;
            console.log(chartData.y);
            console.log(option.xAxis[0].data); //给一个数组过来
            console.log(option.series[0].data); //自己匹配刻度, 不用自己配
            var timestamp = (new Date()).valueOf();
            console.log(timestamp);
            var date=new Date();
            console.log(dateFormat(date, "yyyy-MM-dd hh:mm:ss"))//调用
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(option);
        </script>
    </body>

</html>
<!--   var array1= [100, 52, 200, 334, 390, 330, 220];
            var array2=[999, 52, 200, 334, 390, 330, 220];
            array2 = array1;
            console.log(array2); -->
